JavaScript事件处理程序 学习笔记
我一直认为Javascript的特点就是在和用户交互的过程中可以进行一些操作,那么事件作为用户交互的主要部分就显得特别重要,今天先学习了JS事件处理程序的相关内容。
首先,要明白Javascript 事件处理程序一共有三种:
1.HTML事件处理程序
2.DOM0级事件处理程序
3.DOM2级事件处理程序
1.HTML事件处理程序
<button id="btn2" onclick="show()">btn2</button>
根据它的名字就可以猜到这种方式和HTML有一定关系,上面就是它的实现方法。
使用这种实现方式要注意两个问题:
1.页面元素加载和JS加载的时差问题。具体来说就是如果页面元素先加载完毕而JS没有加载完毕,就会出错。
2.HTML和JS的耦合度太大。改动代码需要修改HTML 和 JS 两个部分,当代码量较大时,这是个很头疼的问题。
2.DOM0级事件处理程序
var btn1 = document.getElementById("btn1"); btn1.onclick = function(){
alert(this.id);
}
如上就是DOM0级事件处理的例子。相比第一种就灵活了许多,而且方便的一点就是事件处理函数(我自己起的名字)可以直接通过this访问到事件所在的元素。
3.DOM2级事件处理程序
var btn3 = document.getElementById("mybtn");
btn3.addEventListener("click",fn1,false);
btn3.addEventListener("focus",fn2,false);
btn3.addEventListener("blur",function(){
this.style.backgroundColor = "";
},false)
function fn1(e){
alert(this.id);
} function fn2(){
this.style.backgroundColor = "yellow";
}
DOM2级事件处理程序主要依靠两个方法:
addEventListener("事件类型",处理函数,false) 和 removeEventListener("事件类型",处理函数,false)
//一个添加,一个删除 第三个参数false表示在冒泡阶段调用事件处理程序
需要注意的是 addEventListener 添加的事件必须通过 removeEventListener移除,并且他们对应的参数必须相同
btn3.addEventListener("blur",function(){
this.style.backgroundColor = "";
},false)
btn3.removeEventListener("blur",function(){
this.style.backgroundColor = "";
},false)//无法移除,因为参数中有匿名函数,虽然写法一样 btn3.addEventListener("click",fn1,false);
btn3.removeEventListener("click",fn1,false); //这样才可以移除
2016年1月4日
JavaScript事件处理程序 学习笔记的更多相关文章
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
- 7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...
- JavaScript事件处理程序的3种方式
最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript ...
- JavaScript 权威指南-学习笔记(一)
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...
- Javascript高级编程学习笔记(58)—— 事件(2)事件处理程序
事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...
- JavaScript高级程序设计学习笔记之事件
1.事件流 事件流描述的是从页面中接收事件的顺序. 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播 ...
- 事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记
1.事件流 浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上 ...
- JavaScript高级程序设计学习笔记--事件
HTML事件处理程序 <input type="button" value="Click Me" onclick"showMessage()&q ...
- JavaScript高级程序设计学习笔记第十三章--事件
事件冒泡: IE 的事件流,事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).例如: <!DOCTYPE html> <htm ...
随机推荐
- Esper学习之六:EPL语法(二)
中秋三天,说闲也不闲,调调工作的代码,倒还解决不少问题.不过也是因为最近工作忙的缘故,Esper被我冷落不少日子了,趁着今天最后一天,赶紧写一篇出来. 从上一篇开始说EPL的语法,主要是关于注解的.今 ...
- Andriod定时任务
参考地址:http://blog.sina.com.cn/s/blog_73288dd10101m6xs.html,http://blog.csdn.net/fancsxx/article/detai ...
- thinkphp的条件的多种写法
class SelectAction extends Action{ function index(){ //thinkphp 查询语言 // 1.普通查询 // 2.区间查 ...
- js操作iframe框架时应该屡清楚的一些概念
1.获取iframe的window对象 存在跨域访问限制. iframeElement.contentWindow 兼容 2.获取iframe的document对象 存在跨域访问限制. chrome: ...
- c# 面相对象1-概括
面向对象和面向过程的区别 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了. 面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为 ...
- MVC和传统的以模板为中心的web架构比较
特性 以模板为中心 MVC架构 页面产生方式 运行并替换标签中的语句 由模板引擎生产HTML页面 路径解析 映射到文件系统路径,也可以通过rewrite等技术来重定向 由控制器定义,并可以通过路由系统 ...
- jQuery工具函数下
测试操作 1.判断是否为数组对象 $(function () { //判断是否为数组对象 var arr = [1,2,3,4]; alert($.isArray(arr));//true }); 2 ...
- flask twisted 结合方案
from flask import Flask, render_template, g app = Flask(__name__) @app.route("/") def inde ...
- Candy Sharing Game(hdoj1034)
Problem Description A number of students sit in a circle facing their teacher in the center. Each st ...
- MYSQL 查看表定义的 4 种方法
方法 1. show create table table_name;可以用这个看表的代码. show create table Strings; 方法 2. show full columns fr ...