js 问题事件与函数问题

JavaScript046

js 问题事件与函数问题,第1张

这传入的是一个MouseEvent事件,event代表传入事件,而当前事件是onmousedown,所以传入的是一个MouseEvent事件。

下面是你这要做的效果的代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div style="width: 300pxheight: 300pxborder: 1px solid black" onmousedown="show_position(event)"></div>

<div></div>

<script>

    function show_position(e) {

//        console.log(e)

 let x = e.offsetX

        let y = e.offsetY

        let div = `

        <div>

            <span>横坐标${x}纵坐标${y}</span>

        </div>

        `

        document.getElementsByTagName("div")[1].innerHTML = div

    }

</script>

</body>

</html>

效果如图:

方法一:通过事件在html中的内联方式来传递参数(假定变量x是参数,下同):

<input type="button" value="点我" onclick="var x=123test(x)"/>

<script>

function test(x){

   alert(x)

}

</script>

方法二:通过全局变量来传递参数:

<input id="abc" type="button" value="点我"/>

<script>

var x=123

window.onload=function(){

   document.getElementById("abc").onclick=function(){

      alert(x)

   }

}

</script>

方法三:通过对象的自定义属性来传递参数:

<input id="abc" type="button" value="点我"/>

<script>

window.onload=function(){

   var abc=document.getElementById("abc")

   abc.x=123

   abc.onclick=function(){

      alert(this.x)

   }

}

</script>

方法四:利用闭包:

<input id="abc" type="button" value="点我"/>

<script>

window.onload=function(){

   (function(x){

      document.getElementById("abc").onclick=function(){

         alert(x)

      }

   })(123)

}

</script>

暂时就想到这么多了,肯定还有其他方法的。

因为ev是事件的参数啊!在ev中包含了事件触发时的参数,比如click事件的ev中包含着.e.pageX,e.pageY,keydown事件中包含着ev.keyCode等,在ie中,ev是全局的可以通过window.event来获取,在其他浏览器中都是作为参数传入的。

所以好多事件函数都是这样写:

mydiv.onclick = function(ev){

if(!ev){ev = window.event} //这句也可以简写成:ev=window.event||ev

alert(ev.pageX+","+ev.pageY)

}