实例说明为什么不要行内使用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 checkbox(复选框) 使用集锦
Apr 28 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP之变量、常量学习笔记
2008/03/27 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
Python的一些用法分享
2012/10/07 Python
爬山算法简介和Python实现实例
2014/04/26 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
名片管理系统python版
2018/01/11 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
python 同时运行多个程序的实例
2019/01/07 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python Shapely使用指南详解
2020/02/18 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Django 解决由save方法引发的错误
2020/05/21 Python
python实现xml转json文件的示例代码
2020/12/30 Python
英语演讲稿范文
2014/01/03 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
讲文明倡议书
2015/04/29 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers
Mysql排序的特性详情
2021/11/01 MySQL