JS事件与DOM操作技巧-优快云博客

问题一:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
for (let i = 0; i < array.length; i++) {
  if (arr[i] = 5) {
    .....
    break; //此处表示取到数之后跳出循环操作
  }

}
复制代码

一般在处理数据时,遍历数组并判断满足需求的一个数据时,需要使用break停止继续循环

问题二:

在dom上注册事件:

在使用js插入html标签时注册事件可以拼接传参数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 页面上的div -->
  <div id="test"></div>
</body>
<script>
  //定义一个data
  var data = 1;
  //创建一段html 并传入参数
  var ht = '<a  onclick="test(' + data + ')">test</a>'
  var htDiv = document.getElementById('test');
  //将这段html插入div
  htDiv.innerHTML = ht;

  function test(data) {
    console.log(data); //1
  }
</script>

</html>
复制代码

问题三:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div onclick="test(event)">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
  </div>

</body>
<script>
  function test(event) {
    console.log(event);
  }
</script>

</html>
复制代码

关于这段代码很简单:

页面有一个div 包含三个 p元素 ,

在div上注册click事件并传入event,

通过js来打印传入的参数

问题说明:以前一直使用框架,给我的错觉就是传入的 event可以获得页面上的所有信息,

然而今天想通过点击这个div,获取这三个p的text值的,

然后就遇到了各种问题,后来才发现,每次点击的时候,当我分别点击p1,p2,p3,传入的event不是一样的,

event. targer而是我点击的这个p,

我以前一直以为传入的是div的信息,所以目前想通过event获得节点的信息是不可能的了,

目前还没有解决这个问题,先记在这边!