事件原理:
js使我们有能力去实现页面交互,事件则是可以被js侦测到的行为。
简单来说事件就是用户操作鼠标键盘后,触发了js事件,产生了对应的反应。
例如点击某个按钮,弹出一个对话框。
事件的三大要素:
即:事件源>事件类型>事件处理程序的过程
① 事件源:事件被触发的对象,则就是触发这个事件的本身。
② 事件类型:如何触发,触发什么样的事件,如鼠标点击、鼠标经过、键盘按下等。
③ 事件处理程序:则是通过函数的方式完成。
事件执行的步骤
① 获取事件源
② 注册事件(即绑定事件)
③ 添加事件处理程序(通用function函数)
操作元素
JavaScript可以通过document操作改变文档内容、结构、样式。我们就可以利用dom操作改变元素里面的内容以及属性等
element.innerText和element.innerHTML的区别
两者都可以获取内容,不同的是innerText会去除空格和换行,并且不会识别HTML标签
而innerHTML则保留了空格和换行,并且能够识别HTML标签,故使用频率较高。
如何修改元素属性:
let btn = document.querySelector('button');
let input = document.querySelector('input');//获取元素
btn.onclick = function(){ //注册事件 处理程序
input.value = '我改变了'; //调用元素的属性赋值
btn.disabled = ture;
}
常见的事件
① 鼠标事件
onclick //当用户点击某个对象时调用的事件句柄
oncontextmenu //在用户点击鼠标右键打开上下文菜单时触发
ondblclick //当用户双击某个对象时调用的事件句柄
onmousedown //鼠标按钮被按下
onmouseenter //当鼠标指针移动到元素上时触发
onmouseleave //当鼠标指针移出元素时触发
onmousemove //鼠标被移动
onmouseover //鼠标移到某元素之上
onmouseout //鼠标某元素移开
onmouseup //鼠标按键被松开
② 键盘事件
onkeydown //某个键盘按钮被按下
onkeypress //某个键盘按钮被按下并松开
onkeyup //某个键盘按钮被松开
③表单事件
onblur //元素失去焦点的时候触发
onfocus //元素获取焦点的时候触发
onchange //该事件是在表单元素内容改变时触发
oninput //输入时触发事件
onsubmit //表单提交时触发
onreset //表单重置时触发事件
onselect //表单获取文本时触发事件
④框架事件/对象事件
onabout //图像加载被中断的时候触发
onbeforeunload //该事件在即将离开页面(刷新或关闭)时触发
onhashchange //该事件在当前URL的锚部分发生修改时触发
onload //一张页面或者一张图片完成加载时触发
onpageshow //该事件在用户访问页面时触发
onpagehide //该事件在用户离开当前页面跳转到另一个页面时触发
onresize //窗口或框架被重新调整大小时触发
onscroll //当文档被滚动时发生的事件
onunload //用户退出页面时触发
目前只列举了常用的几种事件,JavaScript也还有高级事件,也就是 所谓的注册事件、监听事件等。