实例说明为什么不要行内使用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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
原生js实现滑块区间组件
Jan 20 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
php实现微信支付之企业付款
2018/05/30 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
python插入数据到列表的方法
2015/04/30 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
基于python实现文件加密功能
2020/01/06 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
Unix里面如何在后台运行程序
2016/10/14 面试题
小学网上祭英烈活动总结
2014/07/05 职场文书
群众路线个人整改措施
2014/10/24 职场文书
公司与个人合作协议书
2016/03/19 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书