Javascript(js)事件

事件原理：

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也还有高级事件，也就是 所谓的注册事件、监听事件等。