实例说明为什么不要行内使用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的replace方法介绍
Oct 20 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
Web应用开发TypeScript使用详解
May 25 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
linux php mysql数据库备份实现代码
2009/03/10 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
深入了解Python数据类型之列表
2016/06/24 Python
Python中模块string.py详解
2017/03/12 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
协议书格式
2014/04/23 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
物理学专业自荐信
2014/06/11 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
入党介绍人意见2015
2015/06/01 职场文书
雷锋电影观后感
2015/06/10 职场文书