实例说明为什么不要行内使用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 相关文章推荐
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
JS扩展方法实例分析
Apr 15 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
了解javascript中的Dom操作
May 27 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 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 session_start()出错原因分析及解决方法
2013/10/28 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
Python文件夹与文件的操作实现代码
2014/07/13 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
numpy中矩阵合并的实例
2018/06/15 Python
python第三方库学习笔记
2020/02/07 Python
什么是事务?事务有哪些性质?
2012/03/11 面试题
产品工艺师的岗位职责
2013/11/15 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
超市促销活动总结
2014/07/01 职场文书
爱情保证书
2015/01/17 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL