实例说明为什么不要行内使用javascript


Posted in Javascript onApril 18, 2014

很多人都曾经这么使用Javascript

<a href="#" onclick="al()">保存</a>

上面的代码,很方便使用,所有浏览器都支持

虽然我很早就看过一些书,说html,css,js分开来,比较容易维护,但是我贪图方面,还是经常这么写,不过我今天用火狐调试的时候发现,还是不要行内写了,因为这样很不安全,因为用火狐的firebug可以轻松让代码失效!

下面看一下为什么:

<html> 
<head> 
<script> 
function al() 
{ 
alert("good"); 
} 
</script> 
</head> 
<body> 
<a href="#" onclick="al()">保存</a> 
</body> 
</html>

上面的代码是点击标签弹出对话框

效果如图:
实例说明为什么不要行内使用javascript 

但是如果我在火狐里面找到a标签并把里面的js代码去掉的话,在单击a标签就不会弹出对话框了,如下图
实例说明为什么不要行内使用javascript 

所以假如你这个单击事件是判断用户输入数据是否合法的话,那么就无法判断了

本人是做asp.net的,今天就发现这个问题,因为asp.net服务器控件,有两个单击事件,一个前台一个后台的,我用前台的单击事件判断用户的输入数据,合法的话调用后台事件,结果用火狐调试,就发现了上面介绍的现象,即使数据不合法也直接调用后台方法了,也许我这个不是什么技术,不过我为自己发现这个问题而高兴,特此发文章分享一下,哈哈

解决方法:

给a标签个id ,如下面就可以了

<a id="a1" href="#">保存</a> 
<script> 
document.getElementById("a1").onclick=function(){} 
</script>
Javascript 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 #Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 #Javascript
JQuery each()嵌套使用小结
Apr 18 #Javascript
JavaScript编程的10个实用小技巧
Apr 18 #Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 #Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 #Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 #Javascript
You might like
php实现阳历阴历互转的方法
2015/10/28 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
WAF的正确bypass
2017/01/05 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
js实现登录验证码
2016/12/22 Javascript
JS实现复制功能
2017/03/01 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
python 默认参数问题的陷阱
2016/02/29 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
Django组件content-type使用方法详解
2019/07/19 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
浅析PEP572: 海象运算符
2019/10/15 Python
python实现简单俄罗斯方块
2020/03/13 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
个人实习生的自我评价
2014/02/16 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
三十年同学聚会感言
2015/07/30 职场文书
Spring 使用注解开发
2022/05/20 Java/Android