事件的基本了解

    技术2025-03-26  6

    事件:

    事件驱动三要素:

    事件源:触发事件的那个元素事件类型:被js监测到的行为事件处理函数:当事件发生时要进行的处理(事件句柄 || 监听器)

    绑定事件监听器

    // 不推荐使用 <ele onclick = "fn()"> // 同一元素只能绑定一个相同的事件,后者覆盖前者,属于标准DOM0级事件监听 ele.onclick = function(){} ele.addEventListener("type",function(){},boolean) // 示例 (boolean值可不填) btn.addEventListener("click",function(){ console.log(111); })

    删除事件监听

    ele.onclick = null; ele.removeEventListener("type",fn,boolean);

    事件分类

    window 事件 加载事件:onload滚动事件:onscroll窗口尺寸改变事件:onresize 鼠标事件 onclickondbclickonmouseenter onmouseleaveonmousemoveonmouseover onmouseout (会冒泡) 键盘事件 onkeydownonkeyuponkeypress

    事件流

    事件在页面上的传播顺序

    网景 IE 持相反意见

    网景:事件是从外向内触发的 (捕获型事件流)

    IE:事件是从里往外触发传播的(冒泡型事件流)

    标准:在W3C组织下,js同时支持了冒泡和捕获,DOM事件流

    // DOM0级绑定方式(冒泡) ele.onclick = function(){} // DOM2级绑定方式 boolean值为true:捕获,反之为冒泡 ele.addEventListener("type",fn,boolean)

    事件对象 event

    脚本引擎在处理js代码时,会自动给事件处理函数提供一个对象,就是event,他记录了关于该事件的相关信息

    获取event

    现代浏览器 IE9+ 事件处理函数 event低版本 IE window.event

    **处理兼容:let e = event || window.event **

    事件目标

    通过event.target 就可以获取触发事件的目标元素

    event.target 和 this 的区别:

    this:绑定该事件的标签元素

    键盘事件

    event.keyCode ASCLL码,键值码event.key 按键名shiftKey altKey …返货布尔值

    键盘事件只能绑定在可输入元素身上,和document上

    鼠标事件

    //鼠标相对浏览器显示区域的坐标‘ event.clientX,event.clientY // 鼠标相对于页面的坐标 event.pageX,event.pageY // 鼠标相对屏幕坐标 event.screenX,event.screenY // 鼠标相对于事件源的坐标 event.offsetX,event.offsetY

    停止事件传播

    event.stopPropagation();

    阻止默认事件

    event.preventDefault();

    事件委托:

    把事件绑定在一个不变的祖先元素身上好处 不用遍历子元素新增元素也可以拥有该事件 原理:利用事件流,只指定一个事件句柄就可以管理某一类所有事件何时 子级太多子级动态生成

    表单 form

    表单字段:有value值才称为表单字段

    inputtextareaselectbuttonfieldset

    特殊属性(标志性属性)

    autofocus 自动获取焦点disabled 禁用selected 下拉列表默认选中checked 单选多选默认选中readonly 只读multiple 下拉列表多选(按住 shift 实现多选)

    事件:

    焦点事件 获取焦点:ele.onfocus失去焦点:ele.onblur 改变事件 ele.oninput 输入内容时触发ele.onchange 失焦时如果内容发生改变才触发 提交事件 具有提交功能的按钮点击后触发form元素身上的onsubmit 事件 formEle.onsubmit (鲜少使用) 重置事件 具有重置功能的按钮点击触发form元素身上的onreset事件 formEle.onreset(鲜少使用) 让普通按钮具有提交重置功能 // 重置 ele.onclick = function(){ formEle.reset(); } // 提交 ele.onclick = function(){ formELe.submit(); }

    select

    获取所有option:select.options

    获取某一个option:select.options[index]

    获取选中的option下标:select.selectedIndex

    select发生变化时获取到选中的option

    select.onchange = function(){ let i = select.selectedIndex; console.log(select[i]); }

    获取选中的值:select.value

    创建option

    let option = new Option("text","value"); select.options.add(option);

    删除:select.options.remove(index)

    修改

    select.options[index].value = "beiping"; select.options[index].text = "北平";
    Processed: 0.017, SQL: 9