javascript_事件

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/62238334

在javascript脚本文件中为标签添加事件,将事件与HTML分离

var data= document.getElementById("...");
data.onclick = box;

赋值时,只要加上函数名就可以了,如果加上括号,会自动执行。

鼠标事件

onclick 单击
ondblclick 双击
onmousedown 按下还没有释放
onmouseup 释放鼠标时
onmouseover 鼠标经过区域
onmouseout 鼠标离开时
onmousemove 鼠标移动时执行

键盘事件

onkeydown 按下任意键时触发,按下不放会重复触发
onkeypress 按下字符键时触发
onkeyup 松开任意键时触发

HTML事件

onload 加载完成后执行
onunload 页面卸载的时候执行
onselect 选定文本框中文字并松开鼠标时执行
onchange 当文本框中文字改变,并失去焦点时
onfocus 获得焦点,
onblur 失去焦点时
onsubmit 表单(必须在表单form标签上触发)
onreset 重置按钮
onresize 窗口大小变化时

window.resize = function(){};

onscroll 当滚动条滚动时执行

window.onscroll

事件中的this表示绑定的对象,全局范围就是window

当不传参时,arguments[0] 表示event事件对象,浏览器默认传递一个事件对象

onclick= function(event){
        alert(event)// IE中是winodw.event
}

鼠标

onclick只用于左键,onmousedown 和 onmouseup支持所有键
event的button属性
0 左键
1 中键
2 右键

IE:
1 左键
2 右键
4 中键

clientX / clientY

可视区的横纵坐标(不包括被滚动条隐藏的部分)

scrennX / screenY

在屏幕上的坐标

event.screenX

scrollLeft / scrollTop

获取被滚动条隐藏的部分的高度

document.body.scrollTop

shiftKey /ctrlKey / altKey

判断是否按下shift/ctrl/alt键

if(event.shiftKey)

获取键盘返回的值

键码

键盘上的任意键,返回ASCII码,字母不区分大小写(全部转换为大写)
keyCode 返回键码
String.fromCharCode(ASCII码) 将编码转换为字符

    document.onkeydown = function(){
        alert("键码"+event.keyCode+String.fromCharCode(event.keyCode));
    }

字符编码

keypress 事件
charCode 区分大小写返回字符编码

    document.onkeydown = function(event){
        alert("字符编码:"+event.keyCode+String.fromCharCode(event.charCode));
    }

target

onclick事件中,event.target / event.srcElement可以获得与之绑定的标签对象

cancelBubble / setPropagation

取消冒泡

相关文章
|
19天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
24 7
|
7天前
|
JavaScript 前端开发
事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。
【6月更文挑战第27天】事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。例如,动态列表可共享一个`click`事件处理器,通过`event.target`识别触发事件的子元素,简化管理和响应动态内容变化。
10 0
|
17天前
|
数据采集 JavaScript 前端开发
理解并应用:JavaScript响应式编程与事件驱动编程的差异
了解JavaScript的响应式编程与事件驱动编程至关重要。事件驱动编程基于事件触发函数执行,如用户交互或系统事件。响应式编程则关注数据流变化,利用Observables自动响应更新。在爬虫代理IP的Web Scraping示例中,两者分别通过axios和rxjs显示了数据抓取的不同处理方式。掌握这两者能提升异步操作的效率和代码质量。
理解并应用:JavaScript响应式编程与事件驱动编程的差异
|
2天前
|
JavaScript
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
10 2
|
8天前
|
JavaScript 前端开发
JavaScript 中的三种事件模型
JavaScript 中的事件模型主要有三种: 传统事件模型(DOM Level 0) 标准事件模型(DOM Level 2) IE 事件模型(非标准,仅限于旧版本的 Internet Explorer)
13 1
|
15天前
|
JavaScript
Vue.js中使用.self修饰符来限制事件处理程序的作用域
Vue.js中使用.self修饰符来限制事件处理程序的作用域
|
13天前
|
JavaScript 前端开发
第八篇-Javascript 事件
第八篇-Javascript 事件
17 1
|
14天前
|
JavaScript 前端开发
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
18 1
|
20天前
|
JavaScript 前端开发
JS的监听事件
JS的监听事件
|
1天前
|
JavaScript 前端开发 UED