您的位置：首页 > 其它

第04课：Event-事件详解2

2016-11-13 23:04 218 查看

01 JS中级课程-事件捕获-1

1)事件捕获

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>11.事件捕获</title>
<style>
div {padding: 50px;}
#div1 {background: red;}
#div2 {background: blue;}
#div3 {background: green; position: absolute; top: 300px;}
</style>
<script>window.onload = function() {

var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');

function fn1() {
alert(this.id);
}
/*oDiv1.onclick = fn1;
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;*/

//false = 冒泡

//告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数
/*oDiv1.addEventListener('click', fn1, false);
oDiv2.addEventListener('click', fn1, false);
oDiv3.addEventListener('click', fn1, false);*/

//告诉div1，如果有一个进去的事件触发了你，你就去执行fn1这个函数
/*oDiv1.addEventListener('click', fn1, true);
oDiv2.addEventListener('click', fn1, true);
oDiv3.addEventListener('click', fn1, true);*/

oDiv1.addEventListener('click', function() {
alert(1);
}, false);
oDiv1.addEventListener('click', function() {
alert(3);
}, true);
oDiv3.addEventListener('click', function() {
alert(2);
}, false);
//
}
</script>
</head>

<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>

02 JS中级课程-事件的取消-2

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>事件函数的取消</title>
<script>
function fn1() {
alert(1);
}

function fn2() {
alert(2);
}

//document.onclick = fn1;
/*
第一种事件绑定形式的取消
*/
//document.onclick = null;	//取消

/*
ie : obj.detachEvent(事件名称，事件函数);
标准 : obj.removeEventListener(事件名称，事件函数，是否捕获);
*/
/*document.attachEvent('onclick', fn1);
document.attachEvent('onclick', fn2);
document.detachEvent('onclick', fn1);*/

document.addEventListener('click', fn1, false);
document.addEventListener('click', fn1, true);
document.addEventListener('click', fn2, false);

document.removeEventListener('click', fn1, false);</script>
</head>

<body>
</body>
</html>

03 JS中级课程-键盘事件-3

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>13.键盘事件</title>
<script>
/*
onkeydown : 当键盘按键按下的时候触发
onkeyup : 当键盘按键抬起的时候触发
event.keyCode : 数字类型 键盘按键的值 键值
ctrlKey,shiftKey,altKey 布尔值
当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，返回true，否则返回false
*/
document.onkeydown = function(ev) {
//alert(1);
var ev = ev || event;
console.log(ev.keyCode);
}
document.onclick = function(ev) {
var ev = ev || event;
alert(ev.ctrlKey);
}
</script>
</head>
<body>
</body>
</html>


留言本案例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>14.留言本</title>
</head>
<body>
<input type="text" id="text1" />
<ul id="ul1"></ul>
<script type="text/javascript">
window.onload=function(){
var oText=document.getElementById('text1');
var oUl=document.getElementById('ul1');
//当表单元素中输入某些值的时候
oText.onkeyup=function(ev){
var ev=ev||event;
alert(this.value);
if (this.value!='') {
if(ev.keyCode==13){
var oLi = document.createElement('li');
oLi.innerHTML = this.value;
if ( oUl.children[0] ) {
oUl.insertBefore( oLi, oUl.children[0] );
} else {
oUl.appendChild( oLi );
}
}
}
}
}
</script>
</body>
</html>
键盘控制div移动
<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>15.键盘控制div移动</title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script>
window.onload = function() {

var oDiv = document.getElementById('div1');

//不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件

//onkeydown : 如果按下不抬起，那么会连续触发
//定时器
document.onkeydown = function(ev) {

var ev = ev || event;

switch(ev.keyCode) {
case 37:
oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
break;
case 38:
oDiv.style.top = oDiv.offsetTop - 10 + 'px';
break;
case 39:
oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
break;
case 40:
oDiv.style.top = oDiv.offsetTop + 10 + 'px';
break;
}

}

}
</script>
</head>

<body>
<div id="div1"></div>
</body>

</html>

04 js中级课程-事件默认行为_默认事件

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>16.事件默认行为</title>
<script>
/*
事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
怎么阻止？
当前这个行为是什么事件触发的，然后在这个事件的处理函数中使用return false;
*/
document.onkeydown = function() {
return false;
}
//oncontextmenu : 右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发
document.oncontextmenu = function() {
//alert(1)
return false;
}
</script>
</head>
<body style="height: 2000px;">
</body>
</html>


自定义右键菜单

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>17.自定义右键菜单</title>
<style>
#div1 {
width: 100px;
height: 200px;
border: 1px solid red;
position: absolute;
display: none;
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
document.oncontextmenu = function(ev) {
var ev = ev || event;
oDiv.style.display = 'block';
oDiv.style.left = ev.clientX + 'px';
oDiv.style.top = ev.clientY + 'px';
return false;
}
document.onclick = function() {
oDiv.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  事件捕获 事件取消 键盘事件 事件默认行为 右键菜单
相关文章推荐
新的分享
章节导航