JavaScript 查漏补缺03

目录

1.一个简单的例子  随机背景颜色

2.将一个有名字的函数赋值给事件处理参数

3.input框  （even.KeyCode属性：字符代码、键盘代码）

4.JS事件委托/事件代理

---

1.一个简单的例子  随机背景颜色

<button>Change color</button>

var btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random()*(number+1));
}

btn.onclick = function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

我们使用btn变量存储 button，并使用了Document.querySelector()函数。我们也定义了一个返回随机数字的函数。代码第三部分就是事件处理器。btn变量指向 button 元素，在 button 这种对象上可触发一系列的事件，因此也就可以使用事件处理器。我们通过将一个匿名函数（这个赋值函数包括生成随机色并赋值给背景色的代码）赋值给“点击”事件处理器参数，监听“点击”这个事件。

2.将一个有名字的函数赋值给事件处理参数

var btn = document.querySelector('button');

function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

btn.onclick = bgChange;

3.input框  （even.KeyCode属性：字符代码、键盘代码）

3.1 even.KeyCode属性

• 当点击按钮 submit-btn 时，在console中输出 name 中的内容
• 在输入过程中，如果按回车键，则同样执行上一条的需求
• 在输入过程中，如果按 ESC 键，则把输入框中的内容清空

<input id="name" type="text">    
    <button id="submit-btn">Submit</button>
    <script>
        var btn = document.getElementById('submit-btn');
        btn.onclick = function(){
            var inputText = document.getElementById('name').value;  
            console.log(inputText);
        }
        document.onkeydown = function getKey(){
            if(event.keyCode == 13){  
                var inputText = document.getElementById('name').value;  
                console.log(inputText); 
            }   
            if(event.keyCode == 27){
                var inputText = document.getElementById('name');
                inputText.value = "";
                inputText.focus();   
            }
        }
    </script>

提示：

打印键盘(如 "a" 或 "5")	onkeypress 事件
功能键(如 "F1", "CAPS LOCK" 或 "Home")	onkeydown 或 onkeyup 事件

注意： 在 Firefox 中，, keyCode 属性在 onkeypress 事件中是无效的 (返回 0)。浏览器兼容问题，可以一起使用 which 和 keyCode 属性来解决:

var x = event.which || event.keyCode;  // 使用 which 或 keyCode, 这样可支持不同浏览器

 

3.2 JavaScript fromCharCode() 方法：

//将 Unicode 值转换为字符 (不能用于功能键):
var x = event.keyCode;                // 获取 Unicode 值
var y = String.fromCharCode(x);       // 将值转换为字符

//输入4，输出：数字: 52 = 字符: 4

<script type="text/javascript">

document.write(String.fromCharCode(72,69,76,76,79))   //HELLO

</script>

3.3 HTML DOM focus() 方法

<script type="text/javascript">
function setFocus()
  {
  document.getElementById('password1').focus()  //获得焦点
  }
function loseFocus()
  {
  document.getElementById('password1').blur()    //失去焦点
  }
</script>

4.JS事件委托/事件代理

将子元素通过冒泡的形式交给父元素来执行

https://www.cnblogs.com/liugang-vip/p/5616484.html

https://blog.csdn.net/liuliuliu_666/article/details/71158849

《JS高设 3rd》中列出了几种最适合采用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress

4.1.1 0级DOM事件处理程序

var oBtn = document.getElementById("myButton");
oBtn.onclick = function () {
    alert('thanks');
};

4.1.2 DOM2事件通过addEventListener和removeEventListener管理（优点：可以添加多个事件处理程序）

//addEventListener(eventName,handlers,boolean);removeEventListener(),两个方法都一样接收三个参数,第一个是要处理的事件名,第二个是事件处理程序,第三个值为false时表示在事件冒泡阶段调用事件处理程序,一般建议在冒泡阶段使用,特殊情况才在捕获阶段。

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

var oBtn = document.getElementById("btn1");
oBtn.addEventListener('click',function(){
    alert(this.value);
},false);
oBtn.addEventListener('click',function(){
    alert(this.id);
},false);

4.1.3 IE事件处理程序       to be continued

4.1.4 跨浏览器的事件处理程序   to be continued

 

4.2 Event对象提供了一个属性叫target，可以返回事件的目标节点（即事件源），target就可以表示为当前的事件操作的dom。

//这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较

window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　 alert(123);
　　　　　　　  alert(target.innerHTML);
　　　　}
　　}
}
//只有点击li会触发事件了，且每次只执行一次dom操作