点击事件到调用方法流程
# 具体遇到的问题
老师麻烦给我讲一下,比如我点击加号按钮到事件执行完成是如何执行的
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #eee;
}
#calculator{
margin: 100px 0 0 150px;
}
</style>
</head>
<body>
<div id="calculator">
<p>
<input type="text" class="formerInput" value='1'>
<span class="sign">+</span>
<input type="text" class="laterInput" value='1'>
<span>=</span>
<span class="resultOutput">2</span>
</p>
<p>
<input type="button"value='+' class='btn' title='add'>
<input type="button"value='-' class='btn' title='subtract'>
<input type="button"value='*' class='btn' title='multiply'>
<input type="button"value='/' class='btn' title='divide'>
<input type="button"value='%' class='btn' title='mod'>
</p>
<script type="text/javascript">
var wrapElem=document.querySelector('#calculator');
var calculatorElem={
formerInput:wrapElem.querySelector('.formerInput'),
laterInput:wrapElem.querySelector('.laterInput'),
sign:wrapElem.querySelector('.sign'),
resultOutput:wrapElem.querySelector('.resultOutput'),
btns:wrapElem.querySelectorAll('.btn')
}
each(calculatorElem.btns,function(elem){
elem.onclick=function(){
updateSign(this.value);
outputResult(operate(this.title,calculatorElem.formerInput.value,calculatorElem.laterInput.value));
}
})
function each(array,fn){
for(var i=0;i<array.length;i++)
fn(array[i])
}
function updateSign(symbol){
calculatorElem.sign.innerHTML=symbol;
}
var operate=(function(){
var operation={
add:function(num1,num2){return +num1+ +num2;},
subtract:function(num1,num2){return num1-num2;},
multiply:function(num1,num2){return num1*num2;},
divide:function(num1,num2){return num1/num2;},
addOperation:function(name,fn){
if(!operation[name])operation[name]=fn;
return operation;//方便链式调用
}
}
function operate(name,num1,num2){
if(!operation[name])throw new Error('不存在名为'+name+'运算方法');
return operation[name](num1,num2);
}
operate.addOperation=operation.addOperation;
return operate;
// return function (name,num1,num2){
// if(!operation[name])throw new Error('不存在名为'+name+'运算方法');
// return operation[name](num1,num2);
// }
})()
operate.addOperation('mod',function(num1,num2){
return num1%num2;
})
function outputResult(result){calculatorElem.resultOutput.innerHTML=result;}
</script>
</body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示
正在回答
同学你好，能够调用到内部的函数，是因为自执行函数自身设置的返回值就是内部的函数，这里老师上次说过了哦。也就变量operate的值，其实是自执行函数返回值。自执行函数自己执行，把返回结果赋值给了变量operate，调用变量operate，就相当于调用了自执行的返回值。如下 :
祝学习愉快~
同学你好，以加法且传入两个加数1为例，执行流程参考如下（加减乘除等流程都是一样的）：
1.点击事件中调用了两个函数，代码都是从上往下顺序执行的，所以会先执行第一个函数updateSign。updateSign执行完毕，才会执行函数outputResult。
2.执行updateSign，传入实参this.value。事件中，this指向事件的调用者，即this.value获取的是'+'。如下图所示：
然后形参symbol接收实参值，即symbol='+' 。函数中。
calculatorElem.sign.innerHTML是重新设置公式中的符号为'+' ，即如下：
3.updateSign执行完毕，接着执行outputResult()。outputResult中的实参是调用了一个函数operate，所以operate要先执行，执行完毕返回值就是outputResult的实参,传入了实参，然后再去执行updateSign函数。
operate第一个参数传入的是add，第二个参数是和第三个参数就是传入的两个加数1。
4.operate函数是一个自执行函数（即自己调用了自己），它的返回值是内部定义的一个函数operate。所以上图中调用operate函数，执行的是内部返回的函数operate。根据传入的参数，name=add，num1=1,num2=1。
内部operate函数中，返回值为return operation[name](num1, num2)，即operation.add(1,1)。意思是调用了operation对象中的add方法，执行如下：
add方法根据计算，返回值为2。所以如下operate调用最终返回的结果为2，也就是说outputResult的实参为2。
5.执行outputResult，result接收实参2 。
calculatorElem.resultOutput.innerHTML = result就是把2设置为公式的最终显示结果，即如下：
以上就是事件调用方法的流程，自己多看几遍，多思考会好理解一些哦。
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星