表单取消监听数据变化

表单点击取消做数据判断

最近开发遇到一个问题，就是在创建一个表单，有提交和取消两个按钮，点击提交自然跳转到对应的页面，点击取消则需要根据用户是否对表单做了修改进而做相关交互。如果用户对表单做了填写，点击取消，那么将会提示他确定取消保存，确定后回退到上一个页面。如果没有对表单有改变，则直接回退到上一个页面。
需求就是这么简单，折磨了我半天啊。
起初我的第一反应就是，找jquery的相关方法，看看有没有能直接绑定的，然而并没有。然后在各种前端群问了一番，有的说用onchange也有一些其他的，印象不深了。然后试过之后发现onchange是不能在点击取消的时候直接反馈bool值的。各种尝试后都没有用，整个人疯了。
其实问题本来很简单，就是点击取消，对比两次数据是否改变，然后做相关的操作。但是总觉得用源生写太麻烦了，就没去想，最后我还是决定用源生来实现。

form表单代码

<form action="personalInfo.html">
    <div class="am-u-sm-12 am-u-md-12">
        <ul class="am-u-sm-12 am-u-md-6">
            <li>
                <small>部门：</small><select >
                    <option value="option1">学院办公室</option>
                    <option value="option2">党委办公室</option>
                    <option value="option3">学生工作办公室（院团委）</option>
                    <option value="option4">合作事务办公室</option>
                    <option value="option5">留学生管理办公室</option>
                    <option value="option6">基础语言教研室</option>