首页 > 代码库 > dom2
dom2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: yellow;
}
#div2{
width: 100px;
height: 100px;
background-color: blue;
}
#div3{
width: 50px;
height: 50px;
background-color: red;
}
</style>
<script type="text/javascript">
/* [JS中的事件分类]
* 1、鼠标事件：
* click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup
*
* 2、键盘事件：
* keydown: 键盘按下去触发
* keypress: 键盘按下并松开的瞬间触发
* keyup: 键盘抬起时触发
*
* [注意事项：(了解)]
* ① 执行顺序： keydown——keypress——keyup
* ② 长按时，会循环不断的执行keydown-keypress
* ③ 有keydown事件，不一定有keyup事件(事件触发过程中，鼠标移走，可能就没有keyup)
* ④ keypress只能捕获字母、数字、符号键，不能捕获功能键；keydown/keyup基本可以捕获所有功能键(特殊除外)
* ⑤ keypress区分大小写，keydown和keyup不区分；
* ⑥ keydown/keyup区分主键盘和小键盘，keypres不区分；
*
* [确定键盘触发按键]
* ① 在触发函数中，传入参数e，代表按键时间；
* ② 通过e.keyCode ，确认按键Ascii码值，进而确定按键；
* ③ 所有浏览器系统的写法(一般不必要)：
* var evn = e||event; //取到键盘事件
* var code = evn.keyCode||evn.which||evn.charCode;//取到按键编码
*/
var isAlt = 0;
var isEnt = 0;
document.onkeydown = function(e){
var evn = e||event;
var code = evn.keyCode||evn.which||evn.charCode;
if(code==13){
isEnt = 1;
// alert("你按了回车");
}
if(code==18){
isAlt = 1;
}
// 判读Alt+Enter组合键
if(isAlt==1&&isEnt==1){
console.log("Alt+Enter");
}else if(isAlt==1&&isEnt==0){
console.log("Alt");
}else if(isAlt==0&&isEnt==1){
console.log("Enter");
}
}
document.onkeypress = function(e){
console.log(e);
}
document.onkeyup = function(e){
console.log(e);
if(e.keyCode==13){
isEnt = 0;
}
if(e.keyCode==18){
isAlt = 0;
}
}
/* 【JS中的DOM0事件模型】
*
* 1、内联模型：直接将函数名作为HTML标签的某个事件属性的属性值；
* eg: <button onclick="func()">按钮</button>
* 缺点：违反W3C关于Html与JavaScript分离的基本原则；
*
* 2、脚本模型：在JS脚本中通过事件属性进行绑定；
* eg: window.onload = function(){}
* 局限性：同一节点，只能绑定一个同类型事件；
*
*
* 【JS中的DOM2事件模型】
* 1、添加事件绑定：
* IE10之前：btn1.attachEvent("onclick",函数);
* 其他浏览器：btn1.addEventListener("click",函数,true/false);
* 参数三：false(默认)，表示事件冒泡，true，表示事件捕获
* 兼容写法：if(btn1.attachEvent){
* btn1.attachEvent();
* }else{
* btn1.addEventListener();
* }
*
* 优点：同一节点，可以添加多个同类型事件的监听器；
*
* 2、取消事件绑定：
* 注：如果要取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，而不能使用匿名函数。因为在取消事件绑定时，需要传入函数名；
* .removeEventListener("click",函数名);
* .detachEvent("onclick",函数名);
*
*/
window.onload = function(){
var btn1 = document.getElementById("btn1");
function func1(){
alert("1");
}
btn1.addEventListener("click",func1,false);
btn1.addEventListener("click",function(){
alert(2);
},false);
var btn2 = document.getElementById("btn2");
btn2.addEventListener("click",function(){
btn1.removeEventListener("click",func1);
},false);
}
</script>
</head>
<body>
<button id="btn1">点击我弹个窗</button>
<button id="btn2">点击我就是不让他弹</button>
<div id="div1">
<div id="div2">
<div id="div3">
div3
</div>
div2
</div>
div1
</div>
<a href="http://www.mamicode.com/1_HTML基本标签/01_HTML结构之Head.html" onclick="eventHandler()">点击跳转页面</a>
</body>
<script type="text/javascript">
/* [JS中的事件流]
*
* 1、事件冒泡：当某DOM元素触发某事件时，会从当前DOM元素开始，逐个触发其祖先元素的同类型事件，直到DOM根节点；
* DOM0模型，均为事件冒泡；
* IE中使用.attachEvent()添加的事件，均为冒泡；
* 其他浏览器，.addEventListener添加的事件，当第三个参数为false时，为冒泡；
*
* 2、事件捕获：当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发其祖先元素的同类型事件，直到触发到当前元素为止；
* 只有使用.addEventListener添加事件，并设置第三个参数为true时，才进行捕获；
*
* ↓ 当前元素 ↑
* ↓ ↑
* 冒 父元素 捕
* ↓ ↑
* 泡 爷爷元素 获
* ↓ ↑
* DOM根节点
*
* 3、阻断事件冒泡：
* IE浏览器中：将e.cancelBubble属性设为true；
* 其他浏览器：调用e.stopPropagation();方法
* 兼容写法：function myParagraphEventHandler(e) {
* e = e || window.event;
* if (e.stopPropagation) {
* e.stopPropagation(); //IE以外
* } else {
* e.cancelBubble = true; //IE
* }
* }
*
* 3、阻止默认事件：
* IE浏览器中：将e.returnValue属性设为false；
* 其他浏览器：调用e.preventDefault();方法
* 兼容写法：function eventHandler(e) {
* e = e || window.event;
* // 防止默认行为
* if (e.preventDefault) {
* e.preventDefault(); //IE以外
* } else {
* e.returnValue = http://www.mamicode.com/false; //IE
* }
* }
*
*/
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE以外
} else {
e.cancelBubble = true; //IE
}
}
function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = http://www.mamicode.com/false; //IE
}
alert("哈哈哈哈哈跳不了！气死你！");
}
div1.addEventListener("click",function(e){
myParagraphEventHandler();
console.log("div1触发了click事件");
},true);
div2.addEventListener("click",function(e){
myParagraphEventHandler();
console.log("div2触发了click事件");
},true);
div3.addEventListener("click",function(e){
myParagraphEventHandler();
console.log("div3触发了click事件");
},true);
/*div1.onclick = function(){
console.log("div1触发了click事件");
}
div2.onclick = function(){
console.log("div2触发了click事件");
}
div3.onclick = function(){
console.log("div3触发了click事件");
}*/
</script>
</html>
dom2