第1章 事件流
1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收;
然后逐级向上传播至最不具体的那个节点(文档);
1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件;

第2章 事件处理程序

2-1 HTML事件处理程序

//缺点:HTML和JS代码紧密的耦合在一起;

 1 <input type="button" value="按钮" onclick="showMessage()">

2-2 DOM0级事件处理程序

//较传统的方式:把一个函数赋值给一个事件的处理程序属性,用的比较多;
//优点:简单/跨浏览器;

 <input type="button" value="按钮" id="btn2">
<script>
var btn2 = document.getElementById('btn2'); //取得btn2按钮对象;
btn2.onclick = function () { //给btn2添加onclick属性;
alert('这是通过DOM0级添加的事件!');
}
btn2.onclick=null; //删除onclick属性;
</script>

2-3 DOM2级事件处理程序

//DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作;
//addEventListener()和removeEventListner();
//接收三个参数:要处理的事件名/事件处理函数和布尔值;
//在IE8一下,不起作用;

 <input type="button" value="按钮" id="btn3">
<script>
var btn3 = document.getElementById('btn3');
btn3.addEventListener('click',showMessage,false); //添加事件程序;
btn3.addEventListener('click',function(){ //添加多个事件程序;
alert(this.value);
},false);
btn3.removeEventListener('click',showMessage,false); //删除事件程序;
</script>

2-4 IE事件处理程序及跨浏览器

//接收两个参数:事件处理函数名称和事件处理函数

 <script>
var btn3 = document.getElementById('btn3');
btn3.attachEvent('onclick',showMessage); //添加事件;
btn3.detachEvent('onclick',showMessage); //删除事件;
</script>

>2.浏览器兼容

 //将添加和删除事件处理程序封装到对象中并赋值给变量'eventUtil';
var eventUtil = {
//添加句柄
addHandler:function(element,type,handler){
//判断DOM2级事件处理程序;
if(element.addEventListener){
element.addEventListener(type,handler,false);
//判断IE浏览器;
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
//使用DOM0级事件处理程序;
}else{
element['on'+type] = handler;
}
};
//删除句柄
removeHandler:function(element,type,handler){
//判断DOM2级事件处理程序;
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
//判断IE浏览器;
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
//使用DOM0级事件处理程序;
}else{
element['on'+type] = null;
};
};
};
//跨浏览器添加事件处理程序;
eventUtil.addHandler(btn3,'click',showMessage);

第3章 事件对象

3-1 DOM中的事件对象

//在触发DOM上的事件时都会产生一个对象==event;

>1.type == 获取事件类型;
>2.target == 获取事件目标;
>3.stopPropagation() == 停止事件冒泡;
>4.preventDefault() == 阻止事件的默认行为;

 function showMes(event){
alert(event.type); //onclick;点击事件;
alert(event.target.nodeName);   //INPUT;input按钮被触发;
event.stopPropagation(); //停止事件冒泡;
}
<a href="event.html" onclick="stopGoto();">跳转</a>
function stopGoto(event){
event.preventDefault();       //阻止默认行为;
}

3-2 IE中的事件对象

>1.type == 同上;
>2.srcElement属性 == 获取事件目标;
>3.cancleBubble属性 == 阻止冒泡;设置true表示阻止冒泡,false为不组织冒泡;
>4.returnValue属性 == 用于阻止事件的默认行为;

 function showMes(event){
//非IE用event,IE8以下用window.event;
event = event || window.event;
//事件目标兼容;
var ele = event.target || event.srcElement;
//兼容阻止事件冒泡;
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancleBubble();
};
//兼容取消事件默认行为;
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}

第4章 QQ面板拖拽效果

>1.封装获取Class方法

 function getClass(clsName,parent){
var oParent = parent?document.getElementById(parent):document,
eles = [],
elements = oParent.getElementsByTagName('*'); for (var i=0,l=elements.length; i<l; i++){
if(elements[i].className == clsName){
eles.push(elements[i]);
}
}
return eles;
}

>2.封装拖拽函数

 window.onload = drag;
function drag(){
var oTitle = getClass('login_logo_webqq','loginPanel')[0];
//拖拽
oTitle.onmousedown = fnDown;
//关闭弹窗
var oClose = document.getElementById('ui_boxyClose');
oClose.onclick = function(){
document.getElementById('loginPanel').style.display = 'none';
}
//切换状态
var loginState = document.getElementById('loginstate'),
stateList = document.getElementById('loginStatePanel'),
lis = stateList.getElementsByTagName('li'),
stateTxt = document.getElementById('login2qq_state_txt'),
loginStateShow = document.getElementById('login-state_show');
loginState.onclick = function(e){
//阻止冒泡到document使ul隐藏;
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}esle{
e.cancleBubble = true;
}
stateList.style.display = "block";
}
//鼠标滑过/离开和点击状态列表时
for(var i=0,i<lis.length,i++){
lis[i].onmouseover = function(){
this.style.background = "#567";
}
lis[i].onmouseout = function(){
this.style.background = "#fff";
}
lis[i].onclick = function(e){
//阻止冒泡到loginState使stateList显示;
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}esle{
e.cancleBubble = true;
}
var id = this.id;
stateList.style.display = "none";
stateTxt.innerHTML = getClass('stateSelect_text',id)[0].innerHTML;
loginStateShow.className = '';
loginStateShow.className = 'login-state-show '+id;
}
}
document.onclick = function(){
stateList.style.display = "none";
}
}
//鼠标按下事件;
function fnDown(event){
event = event || window.event;
var oDrag = document.getElementById('loginPanel'),
//鼠标按下时,鼠标和面板之间的距离;
disX = event.clientX - oDrag.offsetLeft,
disY = event.clientY - oDrag.offsetTop;
//移动
document.onmouseover = function(event){
event = event || window.event;
fnMove(event,disX,disY);
}
//释放鼠标
document.onmouseup = function(){
document.onmouseover = null;
document.onmouseup = null;
}
}
//鼠标移动事件;
function fnMove (e,posX,posY){
var oDrag = document.getElementById('loginPanel'),
l = e.clientX-posX,
t = e.clientY-posY,
winW = document.documentElement.clientWidth || document.body.clientWidth,
winH = document.documentElement.clientHeight || document.body.clientHeight;
maxW = winW-oDrag.offsetWidth,
maxH = winH-oDrag.offsetHeight;
if(l<0){
l = 0;
}else if(l>maxW){
l = maxW;
}
if(t<0){
t = 0;
}else if(t>maxH){
t=maxH;
}
oDrag.style.left = l+'px';
oDrag.style.top = t+'px';
}

第4章 抽奖系统

>1.键盘事件

>>1.keyDown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件;
>>2.keyPress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件;
>>3.keyUp:当用户释放键盘上的键时触发;

>2.抽奖程序

 var data = ['iPhone5','iPad','三星电脑','谢谢参与'],
timer = null,
flag = 0;
window.onload = function(){
var play = document.getElementById('play'),
stop = document.getElementById('stop');
//(鼠标)开始抽奖
play.onclick = palyFun;
stop.onclick = stopFun;
//(键盘Enter)开始抽奖
document.onkeyup = function(event){
event = event || window.event;
if(event.keyCode == 13){
if(flag == 0){
palyFun();
flag = 1;
}else{
stopFun();
flag = 0;
}
}
}
}
function palyFun(){
var title = document.getElementById('title'),
play = document.getElementById('play');
//清除之前的定时器,放置定时器重复;
clearInterval(timer);
    //设置定时器;
timer = setInterval(function(){
//随机数*数组元素个数=数组随机索引;
var random = Math.floor(Math.random()*data.length);
title.innerHTML = data[random];
},50);
play.style.background = "#999";
}
function stopFun(){
clearInterval(timer);
var paly = document.getElementById('play');
paly.style.background = '#036';
}

JavaScript--DOM事件(笔记)的更多相关文章

  1. 走进javascript——DOM事件

    DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...

  2. JavaScript Dom 事件

    JavaScript  Dom 事件 对于事件需要注意的要点: // this标签当前正在操作的标签. this // event封装了当前事件的内容. even 常用事件 // 鼠标单击.触发事件 ...

  3. JavaScript DOM 事件模型

    JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制.事件反馈.事件冒泡.事件捕获以及事件委托能帮助 ...

  4. JavaScript DOM事件模型

    早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...

  5. 最全的DOM事件笔记

    1. DOM事件模型 DOM是微软和网景发生"浏览器大战"时期留下的产物,后来被"W3C"进行标准化,标准化一代代升级与改进,目前已经推行至第四代,即 leve ...

  6. JavaScript DOM–事件操作

    事件 注册事件 给元素添加事件,为注册事件或者绑定事件 注册事件两种方式 传统方式 监听事件方式 事件监听 addEventListener() 事件监听 (IE9以上) eventTarget.ad ...

  7. javascript;Dom相关笔记

    document.ondblclick 页面双击事件document.title.charAt(0) 取标题第1个字符串window.alert  弹出消息对话框window.confirm 显示确定 ...

  8. JavaScript -- DOM事件

    什么是事件 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间.比如你在网页上见到的鼠标点击一个按钮,按钮的颜色发生了变化,就是因为这个标签绑定了点击事件 鼠标事件 onload:页面加载时触发 on ...

  9. 【javascript dom读书笔记】 第九章 CSS-DOM

    用dom设置样式 element.style.property = value 何时用dom脚本设置样式 作者写到:绝大多数的现代浏览器,虽然对css伪类的支持不是很完整,但是对dom都有良好的支持, ...

  10. 【Javascript DOM读书笔记】chapter8 充实文档内容

    本章目的 作者举出了第一个实例,为一篇 web 页面动态创建缩略语(abbreviation)的列表.大家知道,我们可以使用 <abbr>...</abbr> 来指示一个缩略语 ...

随机推荐

  1. 功能强大支持64位操作系统的转Flash软件(doc转swf):Print2Flash

    Print2Flash是一个虚拟打印机类的文档转换软件,因此只要是可打印的文档,都可以轻松转换为Flash文件,即SWF动画,特别是用于转换PDF.Word.Excel.PowerPoint等文档为S ...

  2. PPT美化大师

    PPT美化大师 http://docer.mysoeasy.com/ PPT文档美化大师是一款专门为Office文档优化锦上添花的工具,该软件时尚个性打造出最漂亮的模板,有了这款软件在操作起来也简单许 ...

  3. 为什么SSL证书流量暴增?

    网络服务提供商 Sandvine 近日发布了一份报告,中提到了一个非常有趣的现象:和去年的数据相比,加密网络流量(SSL)在今年正在呈现出爆发式增长. 这个变化在欧洲表现得十分明显:和去年的 1.47 ...

  4. c# ActiveX 控件的开发

    关于ActiveX控件的开发,网上很多例子,昨天也整整研究一天才捋顺了. 网上大部分例子都是js调用控件的方法,由于要实现在html页面"相应"控件的事件,整整折腾一天. 关键点在 ...

  5. jquery禁用右键、文本选择功能、复制按键的实现

    同时适合IE.firefox.谷歌浏览器下适用,经过筛选代码如下 //禁用右键.文本选择功能.复制按键 $(document).bind(“contextmenu”,function(){return ...

  6. 实战项目:通过当当API将订单抓取到SAP(一)

    公司在当当上经营了一家店铺,通过当当提供的API,用C#写代码,通过NCO3.0调用SAP RFC将订单信息抓取到SAP. 如果你是新手,在当当网上有店铺,且你公司使用SAP系统,恭喜你,下面这些代码 ...

  7. 黑客破译android开发代码真就那么简单?

    很多程序员辛辛苦苦开发出的android开发代码,很容易就被黑客翻译了. Google似乎也发现了这个问题,从SDK2.3开始我们可以看到在android-sdk-windows\tools\下面多了 ...

  8. 【JavaScript】关于javascript原型的深入理解

    http://mozilla.com.cn/post/21667/ http://liuzhijun.iteye.com/blog/1157453 http://liuzhijun.iteye.com ...

  9. poj 3660 Cow Contest(传递闭包 Floyd)

    链接:poj 3660 题意:给定n头牛,以及某些牛之间的强弱关系.按强弱排序.求能确定名次的牛的数量 思路:对于某头牛,若比它强和比它弱的牛的数量为 n-1,则他的名次能够确定 #include&l ...

  10. 【CSS系列-选择器优先级总结】

    转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性   CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...