实例说明为什么不要行内使用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使用cookie
Feb 02 Javascript
jQuery 页面载入进度条实现代码
Feb 08 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
Smarty Foreach 使用说明
2010/03/23 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
laravel安装和配置教程
2014/10/29 PHP
jQuery之按钮组件的深入解析
2013/06/19 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
Python中的匿名函数使用简介
2015/04/27 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
如何用python整理附件
2018/05/13 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
汽车驾驶求职信
2013/10/25 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
mysql left join快速转inner join的过程
2021/06/30 MySQL
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers