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? ...
随机推荐
- SGU180 Inversions（树状数组求逆序数）
题目: 思路:先离散化数据然后树状数组搞一下求逆序数. 离散化的方法:https://blog.csdn.net/gokou_ruri/article/details/7723378 自己对用树状数组 ...
- [HDU5807] Keep In Touch
\(Keep\ In\ Touch\):保持联络 \(Informatik\ verbindet\ dich\ und\ mich.\) 信息将你我连结? 发现这个方程很容易列出来. \(f[i][j ...
- LA 4329 Ping pong
#include <iostream> #include <cstring> #include <cstdio> using namespace std; ; ; ...
- WPF Style设置和模板化Template
WPF样式设置和模板化是一套功能(样式,模板,触发器和演示图版),可以为产品设置统一外观.类似于html的css,可以快速的设置一系列属性值到控件. 案例:ButtonStyle 这里创建了一个目标类 ...
- 怎么去掉Word文字下面的波浪线
Word文字下面的红色波浪线怎么去掉?在word办公软件操作中,可能会遇到一个小问题,就是文字下面有红色绿色的波浪线,看起来感觉不舒服.其 实这是软件自动给你检查语法等错误标出来的,红色的表示系统认为 ...
- [APIO2014] [Uoj103] [Bzoj3676] Palindromes回文串 [Manacher，后缀数组]
用Manacher算法枚举回文子串,每次在后缀数组排序后的后缀数组中二分,因为用某一后缀和其他子串分别求匹配的长度,匹配长度在排序后该后缀的两侧具有单调性(匹配长度为min{H[x]|i<=x& ...
- 算是学完了《Servlet&JSP学习笔记》，立此存照
我感觉从构架上来说,算是入门了, 终于可以正式进入SPRING的学习啦...爽 代码就不弄了,真的太多了...花了差不多两周呢..
- nyoj_513_A+B Problem IV_20130131532
A+B Problem IV 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 acmj最近发现在使用计算器计算高精度的大数加法时很不方便,于是他想着 ...
- Linux环境变量设置中配置文件分析（/etc/profile，~/.bashrc等）（转）
说明:在研究中发现,对于不同版本的Linux系统有着不同的文件,但是总的入口是不变的/etc/profile,下面只是展示加载顺序的研究过程,所以会有些系统没有这个文件等问题. 一.配置文件与作用域: ...
- N天学习一个linux命令之xz
前言 最近使用gitbook写接口文档,gitbook需要nodejs执行环境.安装nodejs时,发现安装包使用的是xz后缀,它是使用LZMA无损数据压缩算法生成的文件,压缩率很高.GNU已经内置了 ...