事宜
形貌
- 事宜是浏览器示知JavaScript顺序用户的行动
事宜属性
HTML的元素属性
- HTML元素能够直接增加事宜属性
body>
<!-- 在html页面中增加事宜属性 - 属性值为函数名 -->
<button onclick="sclick()">按钮</button>
<script>
/*
在html页面设置事宜属性
该事宜作用在当前元素，不能绑定多个
而且没能使HTML页面构造与JavaScript之间存在有用星散
*/
/* 设置事宜处置惩罚函数 */
function sclick() {
console.log( '娃哈哈哈哈哈哈哈' );
}
</script>
</body>DOM事宜属性
- DOM对象能够设置事宜属性
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
/*
DOM对象的事宜属性
onclick = function()
该事宜能够绑定多个元素
也做到了HTML构造与JavaScript的有用星散
*/
/* 先定位元素位置 - 注重类数组的挪用值 */
var b1 = document.getElementsByTagName( 'button' )[0];
/* 设置鼠标点击事宜 */
b1.onclick = function () {
console.log( '嘻嘻嘻嘻嘻嘻嘻之郎' );
};
/* 多个雷同元素绑定一个事宜 */
var b2 = document.getElementsByTagName( 'button' );
/* 先遍历类数组猎取到每个元素 */
for ( var bt = 0; bt < b2.length; bt++ ) {
var bs = b2[bt];
/* 在举行事宜绑定 */
bs.onclick = function () {
console.log( '嘻嘻嘻嘻嘻嘻嘻之郎' );
}
}
</script>
</body>事宜监听器
- DOM对象供应的 addEventListener()要领
- 事宜监听器也能够设置事宜属性
该要领有浏览器兼容题目
- IE8 以下版本不支持
IE8 供应了处理要领
- attachEvent()要领
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
/*
事宜监听器
addEventListener（）“括号中先写事宜名‘没有on’，在写事宜事宜处置惩罚函数，在写布尔值‘可省略’”
能够为单个元素绑定多个事宜
*/
/* 先定位指定元素的位置 */
var b1 = document.getElementsByTagName( 'button' )[0];
/* 设置事宜监听器 */
b1.addEventListener( 'click', function() {
console.log( '我特啊呦赌赢' );
} );
/* 多个雷同元素绑定一个事宜 */
var b2 = document.getElementsByTagName( 'button' );
/* 先遍历类数组猎取到每个元素 */
for ( var bs = 0; bs < b2.length; bs++ ) {
var bx = b2[bs];
/* 设置事宜监听器 */
bx.addEventListener('click', function () {
console.log('我特啊呦赌赢');
});
}
/*
事宜监听器存在浏览器兼容题目
attachEvent（）：IE 8 特地的事宜监听器
括号中先写事宜名‘有on’，在写事宜事宜处置惩罚函数，在写布尔值‘可省略’
*/
b1.attachEvent( 'onclick', function () {
console.log( '我特啊呦弄啥嘞！...' );
} );
</script>
</body>移除绑定事宜
- removeEventListener（）
- 示意对已绑定的事宜举行移除
<body>
<button id="b1">按钮</button>
<script>
/*
移除绑定事宜
removeEventListener（）
括号中先写事宜名‘没有on’，在写事宜处置惩罚函数名（用于指定目的事宜）
只能作用在事宜监听器上
*/
var b = document.getElementById( 'b1' );
/* 零丁写事宜处置惩罚函数并定名 - 轻易指定目的 */
function btn() {
console.log( '我特啊呦弄啥嘞！...' );
}
/* 对指定的目的事宜举行增加 */
b.addEventListener( 'click', btn );
/* 对指定的目的事宜举行移除 */
b.removeEventListener( 'click', btn );
/* 移除绑定事宜有兼容题目 */
/* 特地供应了处理IE 8 的题目 */
b.detachEvent( 'click', btn );
</script>
</body>事宜对象
Event事宜对象
- 一切设置事宜属性的体式格局都能运用
- 该对象存在于事宜处置惩罚函数的参数中
<body>
<button id="b1">按钮</button>
<script>
/*
Event事宜对象
一切设置事宜属性的体式格局都能运用
该对象存在于事宜处置惩罚函数的参数中
*/
var b = document.getElementById( 'b1' );
b.addEventListener( 'click', function( event ) {
console.log( event );
} );
/*
Event事宜对象具有兼容题目
该事宜对象被增加到 window 对象中
*/
b.attachEvent( 'onclick', function( event ) {
// event事宜对象牢固写法
var bevent = event || window.event;
console.log( bevent );
} );
</script>
</body>阻挠默许行动
- event.preventDefault()
- 示意阻挠目的元素所绑定的事宜运转
<body>
<a id="a1" href="事宜对象.html">这是链接</a>
<script>
/*
阻挠默许行动
event.preventDefault()
示意阻挠目的元素所绑定的事宜运转
*/
/* 定位目的元素的位置 */
var a = document.getElementById( 'a1' );
/* 绑定事宜属性 */
/*a.addEventListener( 'click', function(event) {
/!* 阻挠事宜的运转 *!/
event.preventDefault();
} );*/
/*
return false语句
也具有阻挠默许行动的功用
该语句以后的代码将不会被实行
发起安排在事宜处置惩罚函数的最后面
该语句不能作用在 addEventListener（）中
*/
a.onclick = function ( event ) {
event.preventDefault();
return false;
}
</script>
</body>猎取鼠标坐标
pageX和pageY
- 示意猎取鼠标在页面中的位置
<body>
<button id="b1">按钮</button>
<script>
var b = document.getElementById( 'b1' );
b.addEventListener( 'click', function ( event ) {
console.log( event.pageX, event.pageY );
} );
</script>
</body>clientX和clientY
- 示意猎取鼠标在可视窗口中的位置
<body>
<button id="b2">按钮</button>
<script>
var b = document.getElementById( 'b2' );
b.addEventListener( 'click', function ( event ) {
console.log( event.clientX, event.clientY );
} );
</script>
</body>screenX和screenY
- 示意猎取鼠标在显示器屏幕中的位置
<body>
<button id="b3">按钮</button>
<script>
var b = document.getElementById( 'b3' );
b.addEventListener( 'click', function ( event ) {
console.log( event.screenX, event.screenY );
} );
</script>
</body>offsetX和offsetY
- 示意猎取鼠标相对于在父元素中的位置
<body>
<button id="b4">按钮</button>
<script>
var b = document.getElementById( 'b4' );
b.addEventListener( 'click', function ( event ) {
console.log( event.offsetX, event.offsetY );
} );
</script>
</body>