JS---DOM---为元素绑定事件的引入，为元素绑定多个代码，兼容代码
1. 为元素绑定事件的引入：
用src直接绑定多个，只实现最后一个（programmer2.js）
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script src="programmer1.js"></script>
<script src="programmer2.js"></script>
<script> my$("btn").onclick=function () {
console.log("小杨好帅哦");
};
</script>
2. 为元素绑定多个事件
为元素绑定事件(DOM) :一种, 但是不兼容, 所以还是有两种
2.1 对象.addEventListener("事件类型", 事件处理函数, false); ----->谷歌和火狐支持, IE8不支持
- 参数1:事件的类型---事件的名字,没有on
- 参数2:事件处理函数---函数(命名函数,匿名函数)
- 参数3:布尔类型,目前就写false
//为同一个元素绑定多个相同的事件--
my$("btn").addEventListener("click", function () {
console.log("小苏猥琐啊");
}, false);
my$("btn").addEventListener("click", function () {
console.log("小苏龌龊啊");
}, false);
my$("btn").addEventListener("click", function () {
console.log("小苏邪恶啊");
}, false);
my$("btn").addEventListener("click", function () {
console.log("小苏下流啊");
}, false);
2.2 对象.attachEvent("有on的事件类型", 事件处理函数) ----->谷歌不支持, 火狐不支持, IE8支持
- 参数1:事件类型---事件名字，有on
- 参数2:事件处理函数---函数(命名函数,匿名函数)
my$("btn").attachEvent("onclick", function () {
console.log("小杨好帅哦1");
});
my$("btn").attachEvent("onclick", function () {
console.log("小杨好帅哦2");
});
my$("btn").attachEvent("onclick", function () {
console.log("小杨好帅哦3");
});
3. 为元素绑定事件的兼容代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title> </head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script> //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
function addEventListener(element,type,fn) {
//判断浏览器是否支持这个方法
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
} addEventListener(my$("btn"),"click",function () {
console.log("哦1");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦2");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦3");
}); </script>
</body>
</html>
JS---DOM---为元素绑定事件的引入，为元素绑定多个代码，兼容代码的更多相关文章
- jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递
前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...
- jquery绑定事件的坑，重复绑定问题
我实现点击table表格中的删除按钮,找到当前按钮的祖先元素tr 然后删除该行,但是我首先点击删除的时候要先弹出提示框,是否要下载,这时在点击删除按钮删除,之前没有考虑到事件重复绑定问题,所以每次点击 ...
- JS DOM -- 关于回车键盘事件执行事件
一.需求制作一个模拟对话框, 二. 1.需要发送后,输入框清空 2.按enter键可发送 三.代码部分 <!DOCTYPE HTML> <html> <head> ...
- 对jquery新增加的class绑定事件 jquery 对相同class 绑定事件
当页面加载时,就会注册所有的事件,后面通过jquery新增的内容(<div class="item"></div>),再对新增的添加事件$(".i ...
- Jquery Validate根据其他元素的事件来触发单个元素的异步校验
场景:在做一个车辆信息管理模块,而车牌是通过车牌颜色和车牌号码来确定唯一性的,录入车牌信息时需对车牌进行唯一性校验.
- javascript元素绑定事件
js元素绑定事件 想给一个元素绑定一个方法之后,在绑定一个方法而且不被覆盖 window.onload = function () { alert('a'); } window.onlaod=fu ...
- jquery html动态添加的元素绑定事件详解
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...
- 给js动态创建的对象绑定事件
1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent(el, type, fn) { if(el.ad ...
- jquery的bind跟on绑定事件的区别
jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...
随机推荐
- 【开发者portal在线开发插件系列一】profile和基本上下行消息
前言: 开发者portal支持在线开发profile(即设备建模).在线开发插件.模拟应用管理设备.模拟设备上报数据接收命令.支持离线开发的profile和插件的上传部署,是合作伙伴快速集成设备.对接 ...
- 【Java库】如何使用优秀的加密库Jasypt来保护你的敏感信息？
1 简介 今天我们介绍一个Java库-Jasypt,全称为Java Simplified Encryption,用于加密解密.它能够让开发者用花费最小的工作而把加密集成到项目中,并且不需要对加密/解密 ...
- 利用iPhone下载其他地区的App
参考链接:http://www.anfan.com/news/gonglue/76225.html 有些App由于发布的地区不同,在中国地区未发布的App.使用中国地区的Apple ID只能看到中国地 ...
- Creating your first iOS Framework
转自:https://robots.thoughtbot.com/creating-your-first-ios-framework If you’ve ever tried to create yo ...
- iOS开发之压缩与解压文件
ziparchive是基于开源代码”MiniZip”的zip压缩与解压的Objective-C 的Class,使用起来非常的简单 方法:从http://code.google.com/p/ziparc ...
- iOS动画浅汇
转自:http://www.cocoachina.com/ios/20160311/15660.html 在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳 ...
- 压缩感知重构算法之OLS算法python实现
压缩感知重构算法之OMP算法python实现 压缩感知重构算法之CoSaMP算法python实现 压缩感知重构算法之SP算法python实现 压缩感知重构算法之IHT算法python实现 压缩感知重构 ...
- [TimLinux] Python 再谈元类 metaclass
本博文通过对以下链接进行理解后,编写. https://stackoverflow.com/questions/100003/what-are-metaclasses-in-python 1. 类 类 ...
- 【广州.NET社区推荐】【译】Visual Studio 2019 中 WPF & UWP 的 XAML 开发工具新特性
原文 | Dmitry 翻译 | 郑子铭 自Visual Studio 2019推出以来,我们为使用WPF或UWP桌面应用程序的XAML开发人员发布了许多新功能.在本周的 Visual Studio ...
- unordered_map / HashTable 的负载因子是什么意思
// in C++ 前段时间在看一些关于这个的文章时遇到了一些问题:unordered_map / HashTable 的负载因子是什么意思 经过度娘的搜索,最后得出: 若设 Hash 表的桶数量为 ...