如果你想知道前端的核心是什么,来瞧瞧吧

标题所谓Js页面交互,就是在网页上绑定事件,让用户点击可购买商品,点击搜索可查询商品,点击播放可以身临其境

事件在发生的同时,浏览器会给出一个记录事件发生信息的对象,这个对象叫做事件对象(event对象)
在事件函数内部通过window下的event可以拿到事件对象(低版本IE)
事件处理函数的第一个参数可以拿到事件对象(现代浏览器)

function addEvent(ele, type, fn) {
if (ele.attachEvent) {
ele.attachEvent(‘on’ + type, fn);
} else {
ele.addEventListener(type, fn);
}
}

addEvent(oDiv2, ‘click’, function () {

console.log(666)

})

以上是创造绑定事件的语法,需要加深理解 和 谨记 !!

第一种方法创造点击事件
oDiv1.onclick = function () {
console.log(777);
}

第二种方法创造点击事件
oDiv1.addEventListener(‘click’, function () {
console.log(888);
})

oDiv.addEventListener(‘click’, fn); 用监听方法创建点击事件

oDiv.removeEventListener(‘click’, fn); // 要想移除事件监听,创建监听时必须使用命名函数

事件捕获:事件捕获流的思想是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件

事件冒泡:IE提出的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点

事件流包含的三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段

oContainer.addEventListener(‘click’, function () {
console.log(‘我在外面’);
}, true); // 第三个参数表示是否在事件捕获阶段执行事件处理函数,true表示捕获,默认值为false为冒泡;两者只是先后打印顺序不同而已

location.href = ‘http://www.baidu.com’; 进入百度首页
oClose.onclick = function (e) {
var ev = event || e;
if (ev.stopPropagation) {
ev.stopPropagation(); // 现代浏览器阻止事件冒泡
} else {
ev.cancelBubble = true; // 低版本IE阻止事件冒泡
} oAd.remove(); // 这句是为了移除oAd,大篇幅是为了阻止冒泡
}

事件委托简介
在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能

1.每个函数都是对象,都会占用内存。内存中的对象越多,性能就越差
2.必须事先指定所有事件处理程序而导致的DOM访问次数增多,会延迟整个页面的交互就绪时间

对"事件处理程序过多"问题的解决方案就是事件委托。
1.可以对未生成的DOM绑定事件
2.事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件

事件委托特点 1次DOM查找 1个事件处理函数 新增的元素可以触发事件

步骤 1. 将事件往上绑定 2. 获取事件源 3. 判断事件源

onfocus 文本框聚焦
onblur 文本框失焦  
oninput 文本框输入内容发生变化(聚焦状态)

focus()聚焦
blur() 失焦

clientX、clientY

鼠标相对于浏览器窗口可视区域的X,Y坐标,可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

pageX、pageY

鼠标相对于文档的X,Y坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。

offsetX、offsetY

鼠标相对于事件源的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。

onclick(点击) ondblclick(双击) onmousedown(鼠标按钮被按下) onmouseup(鼠标按钮松开)
    onmouseenter(鼠标移入) onmouseleave(鼠标移出) // 不支持冒泡
    onmouseover(鼠标移入) onmouseout(鼠标移出) // 支持冒泡
    onmousemove(鼠标移动)
    button属性

onkeydown  按键按下
    onkeyup    按键抬起
    onkeypress 按键按下抬起
    获取键盘的键值 keyCode || which
    组合键 ctrlKey、altKey、shiftKey

回车  13  
上38
右39
下 40
左37

var left = occ.offsetLeft;  //  运动第一步   取初值

运动第二步      left += spendx;               // 运动第二步  给偏移

运动第三步     occ.style.left= ${left}px;     //运动第三步 赋新值

委托三步骤  步骤  1. 将事件往上绑定   2. 获取事件源   3. 判断事件源
将事件往上绑定  window.onclick = function (e) {
获取事件源 var ev = event || e;  var target = ev.target || ev.srcElement;  
判断事件源     if (target.className === ‘list-item’) {

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页