javascript事件绑定1-模拟jquery可爱的东西
1、给对象添加事件attachEvent(兼容IE，不兼容ff、chrome)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件绑定</title>
<script type="text/javascript">
window.onload = function () {
var btn1 = document.getElementById('btn1');
//attachEvent给对象绑定事件，兼容IE，不兼容FF,chrome
//第一个参数是绑定的事件每次,第二个参数是function
btn1.attachEvent("onclick", function () {
alert("我在IE上蹦蹦跳!");
});
}
</script>
</head>
<body>
<input type="button" value="绑定" id="btn1" />
</body>
</html>
不兼容FF、chrome
2、兼容FF、chrome(IE9及以上也兼容)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件绑定</title>
<script type="text/javascript">
window.onload = function () {
var btn1 = document.getElementById('btn1');
//#region 兼容IE
// btn1.attachEvent("onclick", function () {
// alert("我是IE蹦蹦跳");
// });
//#endregion
//addEventListener(事件名称但是没有"on"前缀,绑定的function,是否进行捕获(一般是false))
btn1.addEventListener("click", function () {
alert("我是FF、Chrome蹦蹦跳,IE9及以上也兼容");
},false);
}
</script>
</head>
<body>
<input type="button" value="绑定" id="btn1" />
</body>
</html>
3、兼容FF、chrome、ie
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件绑定</title>
<script type="text/javascript">
window.onload = function () {
var btn1 = document.getElementById('btn1');
if (btn1.attachEvent) {//如果是IE
btn1.attachEvent("onclick", function () {
alert("我是IE蹦蹦跳");
});
}
else{//如果是非IE
btn1.addEventListener("click", function () {
alert("我是FF、Chrome蹦蹦跳,IE9及以上也兼容");
}, false);
}
}
</script>
</head>
<body>
<input type="button" value="绑定" id="btn1" />
</body>
</html>
4、封装起来
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件绑定</title>
<script type="text/javascript">
window.onload = function () {
var btn1 = document.getElementById('btn1');
addEvent(btn1, 'click', function () { alert("我居然被包养了！！！"); });
addEvent(btn1, 'click', function () { alert("我居然被封装了！！！"); });
} //obj：绑定的对象，eventName：事件名称，fn：函数
function addEvent(obj, eventName, fn) {
if (obj.attachEvent) {
obj.attachEvent('on' + eventName, fn);
}
else {
obj.addEventListener(eventName, fn, false);
}
}
</script>
5、小小模拟jquery
$(function () {
alert("sss");
});
function $(paramArgs) {
return new myQuery(paramArgs);
}
function myQuery(paramArgs) {
var argType = typeof paramArgs;
switch (argType) {
case "function":
addEvent(window, "load", paramArgs);
break;
}
}
6、事件绑定应用：
执行结果
javascript事件绑定1-模拟jquery可爱的东西的更多相关文章
- 第一百二十一节，JavaScript事件绑定及深入
JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...
- Javascript事件模型（三）：JavaScript事件绑定方法总结（及Jquery）
JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- Javascript事件绑定的几种方式
Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...
- javaScript事件绑定
事件绑定,就是要对某一个东西进行操作.(因为你想让他实现什么效果,所以就得绑定他,哈哈哈!) 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函 ...
- 详解javascript事件绑定使用方法
由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所 ...
- javascript事件绑定和普通事件的区别
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- javascript 事件绑定
一.最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性.事件属性名称由事件类型外加一个“on”前缀构成.这些属性也被称为事件处理器 <INPUT TYPE="text&q ...
- JavaScript事件绑定的常见方式
在Javascript中,事件绑定一共有3种方式: ① 行内绑定 ② 动态绑定 ③ 事件监听 原文: https://mbd.baidu.com/newspage/data/landingsuper? ...
随机推荐
- （1）搜索广告CTR预估
https://www.cnblogs.com/futurehau/p/6181008.html 一.广告投放系统 广告系统包含多个子系统.除了上图所示的广告投放系统外,还包含商业系统(广告库的获得) ...
- CentOS安装Docker-ce并配置国内镜像
前提条件 1.系统.内核 CentOS7 要求64位系统.内核版本3.10以上 CentOS6 要求版本在6.5以上,系统64位.内核版本2.6.32-431以上 查看内核版本号 uname -r # ...
- Switch组件
Switch组件,业务需求中经常遇到.我司的旧项目中,由于没有使用较为成熟点的组件库.自己实现了一个switch组件,但是实现的略微有些丑陋. 实现基本需求 https://jsfiddle.net/ ...
- Entity Framework Connection String不保留密码的方法
添加Entity Data Model的时候,到最后一步,有两个radio box: 如果选择include sensitive data,虽然很方便,但是在web.config或者app.confi ...
- [HDU3038]How Many Answers Are Wrong（并查集）
传送门 和某题类似,只不过奇偶换成了和. ——代码 #include <cstdio> #include <iostream> #define N 1000001 int n, ...
- noip模拟赛 钻石
分析:用裸暴力可以得60分,每次dfs,看第i个盒子到底有没有钻石就行了.其实这很像0/1背包问题,只是多了一个m的限制.这要怎么办呢?因为概率是可以加减的,所以可以先不考虑m的限制,求出概率,然后d ...
- Spring MVC-处理程序映射（Handler Mapping）-Bean名称Url处理程序映射（Bean Name Url Handler Mapping）示例（转载实践）
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_beannameurlhandlermapping.htm 说明:示例基于Spri ...
- 民意调查Django实现（三）
我们接着第二小节的開始继续我们的旅程. 我们会继续Web-poll应用.而且将会专注于创建公共接口 - "Views". 哲学思想 一个视图是你的Django应用中的一个Web页面 ...
- CSS3 网格布局(grid layout)基础知识 - 隐式网格自己主动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)
网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道.构成显式网格. 当网格项目定位在这些界限之外.网格容器通过添加隐式网格线生成隐式网格轨道. 这些隐 ...
- commons-fileupload上传文件（1）
近期,写一个上传图片的功能.于是用到commons-fileupload这个组件.提过form提交表单到后台(这里没实用到structs框架).在后台List pl = dfu.parseReques ...