实例说明为什么不要行内使用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 相关文章推荐
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
浅谈Web Storage API的使用
Jun 23 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笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
js 文件引入实现代码
2010/04/23 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
vue组件实例解析
2017/01/10 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
python 控制语句
2011/11/03 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
python+opencv实现车道线检测
2021/02/19 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
财经学院自荐信范文
2014/02/02 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
城管年度个人总结
2015/02/28 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript