js BOM DOM部分基础知识学习笔记(2)
目录
JavaScript_CSS操作
HTML 元素的 style 属性
元素节点的style属性
cssText属性
JavaScript_事件处理程序
DOM0级事件处理
DOM2级事件处理
IE事件处理程序
JavaScript_事件类型之鼠标事件
常见事件类型
事件注意事项
JavaScript_事件流
事件冒泡
事件捕获
JavaScript_Event事件对象
Event对象方法
事件类型之键盘事件
event对象
JavaScript_事件类型之表单事件
select事件
Change 事件
reset 事件,submit 事件
JavaScript_事件类型之窗口事件
JavaScript_事件类型之焦点_剪切板事件
剪贴板事件
JavaScript_网页状态事件
DOMContentLoaded 事件
JavaScript_Touch事件
JavaScript_事件代理(事件委托)
JavaScript_CSS操作
HTML
元素的 style
属性
操作 CSS 样式最简单的方法,就是使用网页元素节点的setAttribute
方法直接操作网页元素的style
属性
div.setAttribute( 'style', 'background-color:red;' + 'border:1px solid black;');
元素节点的style
属性
var divStyle = document.querySelector('div').style;divStyle.backgroundColor = 'red';divStyle.border = '1px solid black';divStyle.width = '100px';divStyle.height = '100px';divStyle.fontSize = '10em';
cssText
属性
var divStyle = document.querySelector('div').style;divStyle.cssText = 'background-color: red;' + 'border: 1px solid black;' + 'height: 100px;' + 'width: 100px;';
Document .active{ font-size: 30px; color: red; } hello var root = document.getElementById("root"); // root.setAttribute("style","color:green;width:300px;height:50px;background:red;") // root.style.color="red"; // root.style.width="300px"; // root.style.border="1px solid red"; // root.style.backgroundColor="green"; // root.style.fontSize="20px";//HTML:font-size 和 JS:fontSize // root.style.cssText="color:red;border:1px solid red;width:300px"; // root.setAttribute("class","active"); root.classList.add("active");
JavaScript_事件处理程序
事件处理程序分为:
- HTML事件处理
- DOM0级事件处理
- DOM2级事件处理
- IE事件处理
HTML事件
Js事件详解--事件处理 HTML 和 js 不分离 function demo(){ alert("hello html事件处理"); } //移除事件 function demo(){ }
DOM0级事件处理
HTML 和 JS 分离了 var btn1=document.getElementById("btn1"); btn1.onclick=function(){alert("Hello DOM0级事件处理程序1");}//被覆盖掉 btn1.onclick=function(){alert("Hello DOM0级事件处理程序2");} //移除事件 btn1.onclick=null;
DOM2级事件处理
var btn1=document.getElementById("btn1"); btn1.addEventListener("click",demo1); btn1.addEventListener("click",demo2); btn1.addEventListener("click", function(){ alert("DOM2级事件处理程序2")//移除不了 和下面那个不是一个东西 }); btn1.addEventListener("click",demo3); function demo1(){ alert("DOM2级事件处理程序1") } function demo2(){ alert("DOM2级事件处理程序2") } function demo3(){ alert("DOM2级事件处理程序3") } btn1.removeEventListener("click",demo2); btn1.removeEventListener("click",function(){ alert("DOM2级事件处理程序2")//移除不了,必须单独写 });
IE事件处理程序
IE实现了与DOM中类似的两个方法:attachEvent()
和detachEvent()
JavaScript_事件类型之鼠标事件
常见事件类型
- 鼠标事件
- 键盘事件
- 表单事件
- 窗口事件
- 焦点/剪贴板事件
- 网页状态事件
- Touch事件
鼠标事件
鼠标事件指与鼠标相关的事件,具体的事件主要有以下一些
- click:按下鼠标时触发
- dblclick:在同一个元素上双击鼠标时触发
- mousedown:按下鼠标键时触发
- mouseup:释放按下的鼠标键时触发
- mousemove:当鼠标在节点内部移动时触发。当鼠标持续移动时,该事件会连触发。
- mouseenter:鼠标进入一个节点时触发,进入子节点不会触发这个事件
- mouseleave:鼠标离开一个节点时触发,离开父节点不会触发这个事件
- mouseover:鼠标进入一个节点时触发,进入子节点会再一次触发这个事件
- mouseout:鼠标离开一个节点时触发,离开父节点也会触发这个事件
- wheel:滚动鼠标的滚轮时触发
var btn1 = document.getElementById("btn1");btn1.onclick = function(){ console.log("click事件");}
事件注意事项
- 这些方法在使用的时候,除了DOM2级事件,都需要添加前缀
on
- click事件指的是,用户在同一个位置先完成mousedown动作,再完成mouseup动作。因此,触发顺序是,mousedown首先触发,mouseup接着触发,click最后触发。
- dblclick事件则会在mousedown、mouseup、click之后触发。
- mouseover事件和mouseenter事件,都是鼠标进入一个节点时触发。两者的区别是,mouseenter事件只触发一次,而只要鼠标在节点内部移动,mouseover事件会在子节点上触发多次。
JavaScript_事件流
事件流描述的是从页面中接受事件的顺序,但有意思的是,微软(IE)和网景(Netscape)开发团队居然提出了两个截然相反的事件流概念,IE的事件流是事件冒泡流(event bubbling),而Netscape的事件流是事件捕获流(event capturing)
事件冒泡
IE提出的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点
Title function p(){ console.log('p标签被点击') } function btn(){ console.log("button被点击") } function divClick(event){ console.log('div被点击'); }function bodyClick(){ console.log('body被点击') }
事件捕获
事件捕获流的思想是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件
Title var oP=document.querySelector('p'); var oB=document.querySelector('button'); var oD=document.querySelector('div'); var oBody=document.querySelector('body'); oP.addEventListener('click',function(){ console.log('p标签被点击') },true); oB.addEventListener('click',function(){ console.log("button被点击") },true); oD.addEventListener('click', function(){console.log('div被点击') },true); oBody.addEventListener('click',function(){ console.log('body被点击') },true);事件捕获:(只能采用DOM2级事件处理程序) DOM2级别事件addEventListener("type",callback,boolean) boolean: true:事件捕获 false:默认值是false,代表事件冒泡
JavaScript_Event事件对象
Event对象属性
- Event.currentTarget(指向事件监听者,即谁添加的事件指向谁)
- Event.Target(事件真正的触发者即谁触发的事件指向谁)
- Event.type
Event.currentTarget
Event.currentTarget属性返回事件当前所在的节点,即正在执行的监听函数所绑定的那个节点
btn.onclick = function(e){ console.log(e.currentTarget);}
Event.target
Event.target属性返回原始触发事件的那个节点,即事件最初发生的节点。事件传播过程中,不同节点的监听函数内部的Event.target与Event.currentTarget属性的值是不一样的,前者总是不变的,后者则是指向监听函数所在的那个节点对象
// HTML代码为// Hello World
para = document.getElementById("para") function hide(e) { console.log(this === e.currentTarget); // 总是 true console.log(this === e.target); // 有可能不是 true e.target.style.visibility = 'hidden';} para.addEventListener('click', hide, false);
Event.type
Event.type属性返回一个字符串,表示事件类型。事件的类型是在生成事件的时候。该属性只读
Event对象方法
- Event.preventDefault()
- Event.stopPropagation()
Event.preventDefault
Event.preventDefault方法取消浏览器对当前事件的默认行为。比如点击链接后,浏览器默认会跳转到另一个页面,使用这个方法以后,就不会跳转了
btn.onclick = function(e){ e.preventDefault(); // 阻止默认事件 console.log("点击A标签");}
Event.stopPropagation()
stopPropagation方法阻止事件在 DOM 中继续传播,防止再触发定义在别的节点上的监听函数,但是不包括在当前节点上其他的事件监听函数
btn.onclick = function(e){ e.stopPropagation(); // 阻止事件冒泡 console.log("btn");}
事件类型之键盘事件
键盘事件由用户击打键盘触发,主要有keydown、keypress、keyup三个事件
- keydown:按下键盘时触发。
- keypress:按下有值的键时触发,即按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发。对于有值的键,按下时先触发keydown事件,再触发这个事件。
- keyup:松开键盘时触发该事件
//HTML var username = document.getElementById("username");username.onkeypress = function(e){ console.log("keypress事件");}
event对象
keyCode:唯一标识
//HTML var username = document.getElementById("username");username.onkeydown = function(e){ if(e.keyCode === 13){ console.log("回车"); }}
JavaScript_事件类型之表单事件
表单事件是在使用表单元素及输入框元素可以监听的一系列事件
- input事件
- select事件
- Change事件
- reset事件
- submit事件
input事件
input事件当、、
的值发生变化时触发。对于复选框()或单选框(
),用户改变选项时,也会触发这个事件
input事件的一个特点,就是会连续触发,比如用户每按下一次按键,就会触发一次input事件。
var username = document.getElementById("username");username.oninput = function(e){ console.log(e.target.value);}
select事件
select事件当在、
里面选中文本时触发
// HTML 代码如下// var elem = document.getElementById('test');elem.addEventListener('select', function (e) { console.log(e.type); // "select"}, false);
Change 事件
Change事件当、、
的值发生变化时触发。它与input事件的最大不同,就是不会连续触发,只有当全部修改完成时才会触发(前提条件是内容必须得到修改,无论是失去焦点还是回车都会触发,但是如果内容不修改,无论是失去焦点还是回车都不会触发)
var email = document.getElementById("email");email.onchange = function(e){ console.log(e.target.value);}
reset 事件,submit 事件
这两个事件发生在表单对象上,而不是发生在表单的成员上。
reset事件当表单重置(所有表单成员变回默认值)时触发。
submit事件当表单数据向服务器提交时触发。注意,submit事件的发生对象是元素,而不是
元素,因为提交的是表单,而不是按钮
var myForm = document.getElementById("myForm")function resetHandle(){ myForm.reset();}function submitHandle(){ console.log("提交");}
JavaScript_事件类型之窗口事件
- scroll 事件
- resize 事件
scroll
事件在文档或文档元素滚动时触发,主要出现在用户拖动滚动条
window.onscroll = function(e){ var srcrollHeight = document.documentElement.scrollTop; console.log(srcrollHeight);}
resize
事件在改变浏览器窗口大小时触发
window.onresize = function(){ console.log("窗口发生变化");}
JavaScript_事件类型之焦点_剪切板事件
焦点事件
焦点事件发生在元素节点和document对象上面,与获得或失去焦点相关。主要包括以下四个事件
- focus:元素节点获得焦点后触发,该事件不会冒泡。
- blur:元素节点失去焦点后触发,该事件不会冒泡。
- focusin:元素节点将要获得焦点时触发,发生在focus事件之前。该事件会冒泡。
- focusout:元素节点将要失去焦点时触发,发生在blur事件之前。该事件会冒泡。
var username = document.getElementById("username");username.onfocus = function(e){ console.log("获得焦点",e.target.value);}username.onblur = function(e){ console.log("失去焦点",e.target.value);}//特殊点:focus() 和 blur() 方法username.focus();//进来就获得焦点username.blur();
剪贴板事件
以下三个事件属于剪贴板操作的相关事件
- cut:将选中的内容从文档中移除,加入剪贴板时触发。
- copy:进行复制动作时触发。
- paste:剪贴板内容粘贴到文档后触发。
var password = document.getElementById("password");password.oncut = function(e){ console.log("剪切");}password.oncopy = function(e){ console.log("复制");}var email = document.getElementById("email");email.onpaste = function(){ console.log("粘贴");}
JavaScript_网页状态事件
- load
- DOMContentLoaded 事件
- readystatechange 事件
Load事件
资源加载完成之后触发,包含DOM和图片等资源都加载完成后,才会触发load
var image = new Image();image.src = "http://iwenwiki.com/banner1.png"image.onload = function(){ console.log("图片的资源加载完成了"); document.body.appendChild(image);}
DOMContentLoaded 事件
网页下载并解析完成以后,浏览器就会在document对象上触发 DOMContentLoaded 事件。这时,仅仅完成了网页的解析(整张页面的 DOM 生成了),所有外部资源(样式表、脚本、iframe 等等)可能还没有下载结束。也就是说,这个事件比load事件,发生时间早得多
document.addEventListener('DOMContentLoaded', function (event) { console.log('DOM生成');});
JavaScript_Touch事件
触摸引发的事件,有以下几种。可以通过TouchEvent.type属性,查看到底发生的是哪一种事件
- touchstart:用户开始触摸时触发,它的target属性返回发生触摸的元素节点
- touchend:用户不再接触触摸屏时触发
- touchmove:用户移动触摸点时触发
- touchcancel:系统取消touch事件的时候触发(使用率低)
var box = document.getElementById("box");box.addEventListener("touchend",function(){ console.log("抬起来了");})box.addEventListener("touchstart",function(e){ console.log("触摸屏幕",e);})box.addEventListener("touchmove",function(){ console.log("移动");})
温馨提示
上述所有事件,都必须用DOM2级事件处理
JavaScript_事件代理(事件委托)
由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)
var ul = document.querySelector('ul');ul.addEventListener('click', function (event) { if (event.target.tagName.toLowerCase() === 'li') { // some code }});